<!-- 推荐歌单 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title">推荐歌单</div>
      </div>
    </van-sticky>
  </div>

  <!-- 搜索框 -->
  <van-search
    v-model="searchKey"
    placeholder="请输入搜索歌单"
    input-align="center"
    @search="onSearch"
    @update:model-value="onSearch"
  />

  <!-- 歌单列表 -->
  <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="song_list_main">
      <div
        v-for="(item, index) in tempSongLists"
        :key="index"
        class="song_list_name_picture"
        @click="toListSongPage(item.id)"
      >
        <div class="per_song_list">
          <van-image
            width="100px"
            height="100px"
            radius="7"
            :src="item.picUrl"
          />
          <div class="icon_clik_num">
            <van-icon name="service-o" />
            &nbsp;{{ changePlayCount(item.playCount) }}
          </div>
        </div>
        <div class="song_list_name">{{ item.name }}</div>
      </div>
    </div>

    <!-- 列表为空时显示 -->
    <div v-if="tempSongLists.length == 0">
      <van-empty image="search" image-size="10rem" description="没有搜到歌单" />
    </div>
    <br />
    <br />
  </van-pull-refresh>
</template>

<script>
import { getRecommendSongList } from '../../api/music'
export default {
  data() {
    return {
      isLoading: false, // 控制下拉的显示
      songLists: [], // 推荐的歌单列表
      tempSongLists: [], // 搜索关键字之后的歌单列表
      searchKey: '', // 搜索关键词
    }
  },
  created() {
    // 获取歌单列表
    this.getSongListFunc()
  },
  methods: {
    // 获取歌单列表
    getSongListFunc() {
      getRecommendSongList().then((res) => {
        // console.log(res);
        this.songLists = res.data.data.result
        this.tempSongLists = this.songLists;
      })
    },

    // 下拉刷新重新获取数据
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        var list = this.songLists.filter(item => item.name.indexOf(this.searchKey) >= 0)
        this.tempSongLists = list;
      }, 1000)
    },

    // 搜索关键字
    onSearch() {
      // console.log(this.songLists);
      const _this = this
      this.isLoading = true
      setTimeout(() => {
        var list = _this.songLists.filter(item => item.name.indexOf(_this.searchKey) >= 0)
        _this.tempSongLists = list;
        _this.isLoading = false
      }, 500)
    },

    // like模糊匹配
    // like(str1, str2) {
    //   var result = str2.indexOf(str1)
    //   if (result < 0) {
    //     return false
    //   } else {
    //     return true
    //   }
    // },

    // 去歌单的歌曲页面
    toListSongPage(songListAid) {
      this.$router.push({
        path: '/music/songList/song',
        query: {
          songListAid,
        },
      })
    },

    // 对播放量进行处理
    changePlayCount(num) {
      if (num > 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: #00cccc;
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.top_title {
  width: 40%;
  // background-color: blue;
  text-align: center;
  margin-left: 3.8em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 600;
}
.return_div {
  width: 30px;
  // background-color: blue;
  padding-left: 20px;
}
.song_list_main {
  width: 90%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.per_song_list {
  width: 100px;
  height: 100px;
  border-radius: 7px;
  background-color: aquamarine;
}
.song_list_name_picture {
  margin-bottom: 10px;
  width: 100px;
}
.song_list_name {
  font-size: 14px;
  color: #303133;
}
.icon_clik_num {
  color: aliceblue;
  position: relative;
  top: -23px;
  left: 5px;
  font-size: 14px;
}
</style>
